<template>
  <el-dialog :model-value="dialogTableVisible">
    <template #header="{ titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">节点资源列表</h4>
      </div>
      <div class="mac-style">{{ dialogTableValue }}</div>
    </template>
    <el-table class="sesor-table" :data="currentNodeResource">
      <el-table-column type="index" label="ID" align="center" width="100" />
      <el-table-column
        property="name"
        label="名称"
        width="100"
        align="center"
      />
      <el-table-column property="value" label="值" align="center" width="100" />
      <el-table-column
        property="status"
        label="读/写"
        align="center"
        width="100"
      >
        <template #default="{ row }">
          <el-tag
            :type="row.status === 0 ? 'success' : 'danger'"
            effect="dark"
            >{{ row.status === 0 ? '读' : '写' }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column property="updateTime" label="更新时间" align="center" />
    </el-table>
  </el-dialog>
</template>

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  dialogTableVisible: {
    type: Boolean,
    require: true,
    default: false
  },
  currentNodeResource: {
    type: Array,
    require: true,
    default: () => []
  },
  dialogTableValue: {
    type: String,
    require: true,
    default: ''
  }
})
</script>

<style lang="scss" scoped>
.my-header {
  text-align: left;
}
.mac-style {
  margin: 5px 0px;
  font-size: 13px;
  font-weight: 200;
  text-align: left;
  // border-bottom: 1px solid #ebeef5;
}
.sesor-table {
  :global(.el-dialog__body) {
    padding: 15px 20px 20px 20px;
  }
}
</style>
